.stats-module {
	.upsell-nudge.card {
		margin: 16px;
	}
}

// Select Dropdown
.stats-module__select-dropdown-wrapper {
	padding: 16px;
	text-align: center;

	.select-dropdown__container {
		position: relative;
	}

	.stats-module.is-loading &,
	.stats-module.has-no-data & {
		display: none;
	}
}

.card.stats-module {
	padding: 0;
	margin-bottom: 10px;
}
// Site sections
.stats__module-list {
	@include clear-fix;
}

.stats-insights__nonperiodic {
	&.has-no-recent {
		color: var( --color-neutral-70 );

		p {
			@include breakpoint-deprecated( '<660px' ) {
				margin-left: 24px;
				margin-right: 24px;
			}

			@include breakpoint-deprecated( '<480px' ) {
				text-align: center;
			}
		}
	}
}

// Section title
@keyframes stats-date-picker__spin {
	100% {
		transform: rotate( 360deg );
	}
}

.stats-section-title {
	@include heading;

	@include breakpoint-deprecated( '<660px' ) {
		margin-left: 24px;
		margin-right: 24px;
	}

	@include breakpoint-deprecated( '<480px' ) {
		text-align: center;
	}
}

// Module Expand
// (link that shows only if there are more results than we can show in the overview)

.module-expand {
	line-height: 40px;
	display: block;

	@include breakpoint-deprecated( '<480px' ) {
		line-height: 48px;
	}

	.stats-module.is-loading &,
	.stats-module.has-no-data & {
		display: none;
	}

	a {
		@extend %mobile-link-element;
		border-top: 1px solid var( --color-border-subtle );
		display: block;
		font-size: $font-body-small;
		padding: 0 24px;
		position: relative;

		// Hover state
		@include breakpoint-deprecated( '>480px' ) {
			&:hover {
				background: var( --color-neutral-0 );
				border-top-color: var( --color-border-inverted );
			}
		}

		// Focus state
		&:focus {
			background: var( --color-neutral-0 );
			border-top-color: var( --color-border-inverted );
		}

		@include breakpoint-deprecated( '>960px' ) {
			.stats__module-list & {
				font-size: $font-body-extra-small;
			}
		}
	}

	.right {
		color: var( --color-neutral-light );
		position: absolute;
		right: 24px;
		top: 0;
	}
}

// Module Header

.module-header {
	background: var( --color-surface );
	height: 40px;
	line-height: 40px;
	padding-left: 24px;
	position: relative;

	.stats-module.is-loading & {
		cursor: default;
		height: 40px;
	}

	.stats-module.summary & {
		cursor: default;
	}
}

// Module Header Title
// 1: If really long titles wrap, hide the excess

.module-header-title {
	@extend %mobile-interface-element;
	@extend %placeholder;

	color: var( --color-neutral-70 );
	font-weight: 600;
	height: 40px; // 1
	overflow: hidden; // 1
	width: auto;
}

// Module Header Actions
// 1: To align optically to right line and create bigger touch target
// 2: So the focus outline isn't covered by the fading pseudo-element

ul.module-header-actions {
	background: var( --color-surface );
	height: 40px;
	list-style: none;
	margin: 0;
	position: absolute;
	right: 0;
	top: 0;

	// Fade really long module titles
	&::before {
		@include stats-fade-text( rgba( var( --color-surface-rgb ), 0 ), var( --color-surface ) );
	}

	.module-header-action {
		display: inline-block;

		&:last-child .module-header-action-link {
			&,
			&::after {
				padding-right: 12px; // 1
			}
		}

		.summary &.toggle-services {
			display: none;
		}
	}

	.gridicon {
		vertical-align: middle;

		.stats-module.is-loading & {
			animation: loading-fade 1.6s ease-in-out infinite;
		}

		.stats-module.is-loading &:hover::before,
		.stats-module.is-loading &::before,
		.stats-module.is-loading &:hover,
		.stats-module.is-loading & {
			color: var( --color-neutral-0 );
			fill: var( --color-neutral-0 );
		}
	}

	.module-header-action-link {
		@extend %mobile-interface-element;
		color: var( --color-neutral-light );
		display: inline-block;
		height: 40px;
		line-height: 40px;
		min-width: 40px;
		position: relative; // 2
		text-align: center;
		z-index: z-index( 'root', 'ul.module-header-actions .module-header-action-link' ); // 2

		.stats-module.is-loading & {
			cursor: default;
		}
	}

	// Hover state
	@include breakpoint-deprecated( '>480px' ) {
		.stats-module:hover & .module-header-action-link {
			color: var( --color-primary );
		}

		.module-header & .module-header-action-link:hover {
			color: var( --color-link-dark );
		}
	}

	// Focus state
	.module-header & .module-header-action-link:focus {
		color: var( --color-link-dark );
	}

	// Info button
	.toggle-info {
		&,
		.stats-module.is-loading & {
			display: none;
		}

		.stats-module.is-expanded & {
			display: inline-block;
		}
	}

	// Toggle
	.toggle-services .gridicon {
		transition: 0.2s transform ease-out;
		transform: translate3d( 0, 0, 0 );
	}

	.stats-module.is-expanded & .toggle-services .gridicon {
		transform: rotate( 180deg );
	}
}

.module-content .upsell-nudge.card {
	margin: 16px;
}

// Module Content Text

.module-content-text {
	box-sizing: border-box;
	color: var( --color-neutral-70 );
	font-size: $font-body-small;
	padding: 16px 16px 0;
	min-height: 1em;
	width: 100%;
	text-align: center;

	a {
		display: block;

		@include breakpoint-deprecated( '>480px' ) {
			display: inline;
		}
	}

	@include breakpoint-deprecated( '>960px' ) {
		.stats__module-list & {
			font-size: $font-body-extra-small;
		}
	}

	// Don't show text when loading, even if it's info text and the module is empty
	.stats-module.has-no-data &,
	.stats-module.is-loading & {
		display: none;
	}

	// Hidden info box
	&-info {
		background: var( --color-neutral-0 );
		box-shadow: inset 0 1px 0 var( --color-neutral-0 );
		color: var( --color-neutral-70 );
		display: none;
		position: relative;

		.stats-module.is-showing-info & {
			display: inline-block; // 1
		}

		.stats-module.is-loading.is-showing-info & {
			display: none; // 2
		}
	}

	ul,
	ol {
		margin: 0;
	}

	// Representation of what the published status looks like within a list of posts and pages
	.legend.published {
		border-left: 4px solid var( --color-primary );
		padding-left: 12px;
	}

	.legend.achievement {
		color: var( --color-warning );
	}

	// Hide legends if there is no data
	.stats-module.has-no-data & .legend {
		display: none;
	}

	.gridicon {
		margin-right: 4px;
		vertical-align: middle;
	}

	// List of associated FAQ items, support pages, tips and tricks, etc
	.documentation {
		list-style: none;

		li {
			font-size: $font-body-small;
			line-height: 2em;

			@include breakpoint-deprecated( '>960px' ) {
				.stats__module-list & {
					font-size: $font-body-extra-small;
				}
			}

			@include breakpoint-deprecated( '<480px' ) {
				border-bottom: 1px solid var( --color-border-subtle );

				&:last-child {
					border: 0;
					margin-bottom: -12px;
				}
			}
		}

		a {
			@extend %mobile-link-element;
			display: block;
			position: relative;
			padding: 6px 0;

			@include breakpoint-deprecated( '<480px' ) {
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}
	}
}

.tab-email-followers .tab-content.email-followers,
.tab-wpcom-followers .tab-content.wpcom-followers,
.tab-top-authors .tab-content.top-authors,
.tab-top-content .tab-content.top-content {
	display: block;
}

// Module Content Table
.stats-detail__row-label {
	font-weight: 600;
}

.module-content-table {
	position: relative;

	.module-content-table-scroll {
		min-height: 210px;
		overflow: auto;
		overflow-x: auto;
		overflow-y: visible;
	}

	// Table cells
	// 1: Make sure table cells are always only on one line, otherwise the sticky left tds don't have the right size
	// 2: Make right padding much greater to accommodate for increased gradient
	td,
	th {
		border-bottom: 1px solid var( --color-border-subtle );
		border-right: 1px solid var( --color-border-subtle );
		font-size: $font-body-extra-small;
		padding: 8px 12px;
		white-space: nowrap; // 1

		&:first-child {
			padding-left: 24px;
		}

		&:last-child {
			border-right: none;
			padding-right: 60px; // 2
		}
	}

	tbody tr:last-child th,
	tbody tr:last-child td {
		border-bottom: none;
	}

	tbody th:first-child {
		background: var( --color-surface );
		position: absolute;
		z-index: z-index( 'root', '.module-content-table tbody th:first-child' );
	}

	&.is-fixed-row-header {
		/**
		Use of .is-fixed-row-header requires the first cell in each row to be `th` element
		 */
		th:first-child {
			width: 34px; // 24 (margin-left) + 12 (margin-right) + 1 (border) + 34 = 70
			transform: translateX( -70px );
			background: var( --color-surface );
			position: fixed;
			z-index: z-index( 'root', '.module-content-table tbody th:first-child' );
		}

		.module-content-table-scroll {
			margin-left: 70px;
		}

		th,
		td {
			vertical-align: bottom; // Doesn't work in FireFox without this bit
		}
	}

	// Left this modifier as-is because these tables are likely going to change
	// a lot or otherwise be removed, and at least it's directly dependent on
	// being associated with a td in this structure
	@include breakpoint-deprecated( '>480px' ) {
		.stats-module & td.has-no-data:hover, // 1
		tbody tr:hover td,
		tbody tr:hover th {
			background: var( --color-neutral-0 );
		}

		.stats-module & td.highest-count:hover,
		tbody tr td:hover {
			background: var( --color-neutral-0 );
			color: var( --color-neutral-70 );
		}
	}

	.stats-module & td.highest-count {
		color: var( --color-warning );
		position: relative;
	}

	.spacer {
		color: transparent;
	}

	.stats-detail-weeks__date,
	.stats-detail-weeks__value {
		white-space: nowrap;
	}

	.stats-detail-weeks__value {
		display: block;
		font-size: $font-body-extra-small;

		&.is-rising {
			color: var( --color-success );
		}

		&.is-falling {
			color: var( --color-error );
		}

		&.is-same {
			color: var( --color-neutral-light );
		}

		&.is-rising,
		&.is-falling,
		&.is-same {
			margin-top: -2px;
		}

		.gridicon {
			margin: 0 2px -3px -4px;
			width: 15px;
		}
	}

	thead th,
	.stats-detail-weeks__date {
		color: var( --color-text-subtle );
	}

	.stats-detail-weeks__date {
		display: block;
		font-size: $font-body-extra-small;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	// Fade out sides of tables to hint at horizontal scrolling
	// 1: 16px should cover for any scrollbar
	// 2: Much wider to show horizontal scrolling better (since the window loads scrolled to the left)
	&::before,
	&::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 16px; // 1
		left: 0;
		top: 0;
		width: 20px;
		z-index: z-index( 'root', '.module-content-table::after' );
	}

	&::after {
		left: auto;
		right: 0;
		width: 60px; // 2
		@include long-content-fade( $size: 15% );
	}
}

.stats-module__all-time-nav {
	.stats-section-title {
		margin: 0 16px 16px;
	}
}

.stats-module__footer-actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	.button.stats-download-csv {
		color: var( --color-text-subtle );

		&[disabled],
		&.disabled {
			color: var( --color-neutral-20 );
		}

		&:hover:not( [disabled] ) {
			color: var( --color-text );
		}
	}
}

.stats-module__header.is-refreshing {
	animation: loading-fade 1.6s ease-in-out infinite;
}

.stats-module__availability-warning {
	padding: 12px 20px 0;
	display: flex;

	.gridicon {
		fill: var( --color-text-subtle );
	}
}

.stats-module__availability-warning-message {
	font-size: $font-body-small;
	margin-left: 8px;
	margin-bottom: 0;
	color: var( --color-text-subtle );
}

.stats__module-list .stats-module__availability-warning-message {
	font-size: $font-body-extra-small;
}
